<template>
  <h3 class="title">课程成员信息</h3>
  <div class="operateList" v-if="role=='teacher'">
    <el-button type="primary" @click="dialogFormVisible = true"
      >添加成员</el-button
    >
  </div>
  <div>
    <pull-down-table :cId="courseId" :studentList="studentsList" ref="pulldown" @referStudents="getAllStudent"></pull-down-table>
  </div>
  <el-dialog
    v-model="dialogFormVisible"
    title="新增学生"
    width="30%"
    align-center
  >
    <el-form :model="form" ref="form">
      <el-form-item
        label="账号"
        prop="account"
        :rules="[
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur',
          },
          { type: 'number', message: '账号必须是数字' },
        ]"
      >
        <el-input v-model.number="form.account" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="submit()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import PullDownTable from "@/components/myComponent/pullDownTable.vue";
import { getParams } from "@/commonFunction/url.js";
import { insertInCourse,queryStudentsByCid } from "@/api/course.js";
import { mapGetters } from "vuex";
export default {
  components: {
    PullDownTable,
  },
  data() {
    return {
      courseId: "",
      dialogFormVisible: false,
      form: {
        account: "",
        realName: "",
      },
      originStudents:[]
    };
  },
  methods: {
    cancel() {
      this.dialogFormVisible = false;
      this.$refs.form.resetFields();
    },
    submit() { 
      this.$refs.form.validate((val) => {
        if (val) {
          insertInCourse(this.courseId,this.form.account).then(   
            (res) => {
              if (res.code == 200) {
                this.$refs.form.resetFields();
                this.getAllStudent()
                ElMessage({
                  message: "添加成功！",
                  type: "success",
                });
              } else {
                ElMessage.err(res.message);
              }
              this.dialogFormVisible=false
            },
            (err) => {
              ElMessage.error("promise错误");
            }
          );
        }
      });
    },
    getAllStudent(){
      queryStudentsByCid(this.courseId).then((res)=>{
          if(res.code==200)
          {
            this.originStudents=res.data
          }
      })
    }
  },
  created() {
    this.courseId = getParams();
    this.getAllStudent()
  },
  mounted() {},
  computed:{
    studentsList(){
      let students=[]
      this.originStudents.forEach(item=>{
        students.push({'school':item.school,'realName':item.realName,'gender':item.gender,'email':item.email,'tel':item.tel,'id':item.id})
      })
      return students;
    },
    ...mapGetters({
      role: "getRole",
    }),
  },
};
</script>
<style scoped>
.title {
  text-align: left;
}
.operateList {
  text-align: right;
  margin-bottom: 10px;
}
.el-dialog__body {
  padding: 30 20 0 20 !important;
}
</style>